<template>
  <page-header-wrapper :title="false">
    <a-card title="资质管理">
      <template slot="extra">
        <a-button size="small" type="primary" icon="plus" @click="onAdd">添加资质</a-button>
      </template>
      <a-row :gutter="[16, 16]">
        <a-col v-for="item in companyOpts" :key="item.id" :span="12">
          <a-card bordered :title="item.name">
            <template slot="extra">
              <a-button size="small" icon="plus" @click="addPatent(item.id)"></a-button>
            </template>
            <a-table
              bordered
              size="middle"
              :row-key="(record) => record.id"
              :columns="naturalColumns"
              :data-source="item.engineer"
            >
              <template slot="label" slot-scope="text">
                <a-tag v-for="(item,index) in text" :key="index">{{item}}</a-tag>
              </template>
              <template slot="action" slot-scope="text,record">
                <a-button size="small" type="link" @click="toDo(record.id)">
                  <div v-if="record.status == 10">下架</div>
                  <div v-else>上架</div>
                </a-button>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
<!--      <div class="table-operator">-->
<!--        <s-table-->
<!--          ref="table"-->
<!--          size="middle"-->
<!--          :columns="naturalColumns"-->
<!--          :data="naturalData"-->
<!--        >-->
<!--        </s-table>-->
<!--      </div>-->
    </a-card>
    <a-modal
      title="添加企业资质"
      v-model="visible"
      :destroy-on-close="true"
      @ok="onSubmit"
    >
      <a-form-model
        ref="addForm"
        :model="companyForm"
      >
        <a-form-model-item label="公司名称">
          <a-input type="text" v-model="companyForm.name" placeholder="输入公司名称" />
        </a-form-model-item>
        <a-form-model-item label="资质文件">
          <a-upload
            name="file"
            accept=".pdf"
            :multiple="true"
            :headers="headers"
            :action="uploadUrl"
            @change="onChange"
          >
            <a-button>
              上传公司资质文件
            </a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="添加所属公司的专利师"
      v-model="visible2"
      @ok="onSubmit2"
    >
      <a-form-model
        ref="patentForm"
        :model="patentForm"
      >
        <a-form-model-item label="专利师名称">
          <a-input type="text" v-model="patentForm.name" placeholder="输入专利师名称" />
        </a-form-model-item>
        <a-form-model-item label="专利师擅长领域">
          <a-select
            mode="tags"
            v-model="patentForm.label"
            placeholder="选择专利师擅长领取（多选）"
          >
            <a-select-option v-for="(item,index) in labelOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="剩余提交数">
          <a-input-number style="width: 100%" v-model="patentForm.submit_num" placeholder="输入剩余安全提交的数量" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { addCompany, getNatural, getOption, getPatentAdd, postPatentAdd } from '@/api/patent.process'
import apis from '@/api'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import businessColumns from '@/columns/patent.process'

export default {
  components: {
    STable
  },
  name: 'Natural',
  data () {
    return {
      naturalColumns: businessColumns.pantenter,
      naturalData: [],
      companyOpts: [],
      visible: false,
      visible2: false,
      companyForm: {},
      uploadUrl: apis.Upload,
      headers: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      patentForm: {},
      labelOpts: {}
    }
  },
  created () {
    this.getCompany()
  },
  methods: {
    getCompany () {
      getNatural().then(res => {
        this.companyOpts = res.result.data
      })
    },
    onAdd () {
      this.companyForm = {}
      this.visible = true
    },
    onSubmit () {
      const app = this
      const data = {}
      for (const k in app.companyForm) {
        data['qualifications[' + k + ']'] = app.companyForm[k]
      }
      addCompany(data).then(res => {
        if (res.status === 0) {
          app.visible = false
          app.getCompany()
        }
      })
    },
    onSubmit2 () {
      const app = this
      const data = {}
      for (const k in app.patentForm) {
        if (k === 'label') {
          for (const j in app.patentForm.label) {
            data['engineer[label][' + j + ']'] = app.patentForm.label[j]
          }
        } else {
          data['engineer[' + k + ']'] = app.patentForm[k]
        }
      }
      postPatentAdd(app.patentForm.id, data).then(res => {
        app.visible2 = false
        app.getCompany()
      })
    },
    addPatent (id) {
      this.patentForm = {}
      getPatentAdd(id).then(res => {
        this.patentForm['id'] = id
        this.labelOpts = res.result.labelOpts
        this.visible2 = true
      })
    },
    onChange (info) {
      if (info.file.status === 'uploading') {
        return false
      }
      if (info.file.status === 'done') {
        this.companyForm.filename = info.file.name
        this.companyForm.file = info.file.response.result.url
      }
    },
    toDo (id) {
      getOption(id).then(res => {
        this.getCompany()
      })
    }
  }
}
</script>

<style scoped>

</style>
